<div style="display:none" id="tp-form-modal-{$nav.id}">
  <div id="" style="padding:15px;">
{admin:include file="/tpl/form" form_id="$nav['id']" fields="$nav['fields']"}
</div>
</div>

<form class="tplay-list-search-form layui-form" lay-filter="tplay-search-form-{$nav.id}" id="tplay-search-form-{$nav.id}">
  <div class="layui-form-item">
    {foreach $nav.fields as $k=>$r}
    {if $r.is_search}
    <label class="layui-form-label">{$r.alias}</label>
    <div class="layui-input-inline">
      {switch $r.type}
      {case select}
      <select name="{$r.search_name}" class="layui-input">

          <option value="">不限</option>
          {foreach $r.optional_data_arr as $k=>$v}
              <option value="{$k}">{$v}</option>
          {/foreach}
      </select>
      {/case}
      {case textarea}
      <input style="width:{$r.width|default=80}px" type="text" name="{$r.search_name}" class="layui-input" placeholder="">
      {/case}
      {case text}
      <input style="width:{$r.width|default=80}px" type="text" name="{$r.search_name}" class="layui-input" placeholder="">
      {/case}
      {/switch}
    </div>
    {/if}
    {/foreach}
    
    
    <button type="button" class="layui-btn" lay-submit lay-filter="tp-list-search-submit-{$nav.id}" data-type="reload">搜索</button>

    </div>
    
  </form>

<script type="text/html" id="tplay-toolbar-{$nav.id}">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加{$nav.form_name}</button>
    <button class="layui-btn layui-btn-sm" lay-event="del">删除选中</button>
    {if isset($nav['btns'][1])}
    {foreach $nav['btns'][1] as $r}
    <button type="button" action="btns_{$r.id}" class="layui-btn layui-btn-sm">{$r.name}</button>
    {/foreach}
    {/if}
    {admin:hook name="table_top_btn_after"}
  </div>
</script>


<script type="text/html" id="tplay-bar-{$nav.id}">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<table id="tplay-table-{$nav.id}" lay-filter="tplay-table-{$nav.id}"></table>

<script>

layui.use(['element','table','form','upload'], function(){

    var $ = layui.$,table = layui.table,form=layui.form,element=layui.element,
    upload = layui.upload;

   
    form.render(null,"tplay-search-form-{$nav.id}");
var tp_form = $("#tp-form-{$nav.id}");
var tp_edit_data = {};

var tp_list_search_form = $("#tp-list-search-form-{$nav.id}");


var tp_form_modal = $("#tp-form-modal-{$nav.id}");
var tp_form_modal_html = tp_form_modal.html();
tp_form_modal.remove();//删除用于弹窗的元素，避免弹窗后元素ID等重复


{foreach $nav.fields as $k=>$r}
{if in_array($r.type,['select']) && $r.is_list}
var select_data_{$r.name} = {:json_encode($r.optional_data_arr)};
{/if}
{/foreach}

var bool_list = ['-','✔'];

var tablelns = table.render({
    elem: '#tplay-table-{$nav.id}'
    ,toolbar:"#tplay-toolbar-{$nav.id}"
    ,url:'{$nav.data_source}'
    ,cols: [[
      {type:'checkbox'}
      {foreach $nav.fields as $k=>$r}
      {if $r.is_list}
      ,{field:'{$r.name}', width:125, title: '{$r.alias}',templet:function(d){
        {switch $r.type}
            {case select}
                return select_data_{$r.name}[d.{$r.name}];
            {/case}
            {case bool}
                return bool_list[d.{$r.name}];
            {/case}
            {default /}
                return d.{$r.name};
        {/switch}
      }}
      {/if}
      {/foreach}
      ,{field:'', title: '操作',toolbar:"#tplay-bar-{$nav.id}"}
    ]]
    ,page: true
});

form.on('submit(tp-list-search-submit-{$nav.id})', function(data){
  tablelns.reload({
    where:data.field
  });
});

function deleteItems($ids){
 
  $.ajax({
      url:'{$nav.data_source}/'+$ids,
      type:'DELETE',
      dataType:'json',
      success:function(d){
         tp_table.bootstrapTable('refresh');
      }
    });
}

function popul(data){
  
  layer.open({
  type: 1,
  id:"form-popul-{$nav.id}",
  area:['{$nav.form_width}px','{$nav.form_height}px'],
  title:data?"修改":"添加"+"{$nav.form_name}",
  shade:0.3,
  shadeClose:0,
  anim: -1,
  btn: [data?"修改":"添加", '取消'],
  yes: function(index, layero){
      var url = "{$nav.data_source}";
      var data_type = 'POST';
      if(data){
        url = url+"/"+data.id;
        data_type = "PUT";
      }
      $.ajax({
        url:url,
        type:data_type,
        dataType:'json',
        headers:{
          contentType: "application/json"
        },
        data:layero.find("form").serialize(),
        success:function(d){
            if(d.code==0){
              tablelns.reload();
              layer.close(index);
            }else{
              layer.msg(d.msg);
            }
        }
      });
  },
  success: function(layero, index){
    layero.find("form")[0].reset();
    if(data) form.val("tplay-form-{$nav.id}",data);
    for(var o in data){
      if(typeof data[o] == 'object'){
        var configval = {};
        for(var oo in data[o]){
          configval[o+'['+oo+']'] = data[o][oo];
        }
        form.val("tplay-form-{$nav.id}",configval);
      }
    }
    var theform = layero.find("form")[0];
    {foreach $nav.fields as $r}
        {switch $r.type}
            {case content}
                UE.delEditor("ueditor_{$r.name}");
                UE.getEditor("ueditor_{$r.name}");
            {/case}
            {case image}
                if(data) $("#upload_image_btn_{$r.name}").attr('src',data['{$r.name}']);
                upload.render({
                  elem: '#upload_image_btn_{$r.name}' //绑定元素
                  ,url: '/File/upload' //上传接口
                  ,done: function(res){
                  //上传完毕回调
                      $("#upload_image_btn_{$r.name}").attr('src',res.src);
                      $(theform).find("input[name={$r.name}]").val(res.src);

                  }
                  ,error: function(){
                      layer.alert("上传异常");
                  }
                });
            {/case}
        {/switch}
    {/foreach}
  },
  content: tp_form_modal_html
  });
}


//头工具栏事件
table.on('toolbar(tplay-table-{$nav.id})', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'add':
      popul();
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选');
      break;
    };
});

  //监听行工具事件
  table.on('tool(tplay-table-{$nav.id})', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        deleteItems(data['id']);
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
        popul(data);
    }
  });



});
</script>
